<template>
    <div>
        <div class="recommandTitle">热销推荐</div>
        <ul>
            <router-link
                tag="li" 
                :to="'/detail/'+ item.id"
                class="listItem" 
                v-for="item of list"
                :key="item.id"
            >
                <img class="item-img" :src="item.imgUrl" >
                <div class="item-info">
                    <p class="itemTitle">{{item.title}}</p>
                    <p class="itemDesc">{{item.desc}}</p>
                    <button class="item-btn">查看详情</button>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'recommand',
    props: {
        list: Array
    }
}
</script>

<style lang='stylus' scoped>
@import '~styles/maxins.styl'
    .recommandTitle
        margin-top: .2rem
        line-height: .6rem
        background: #eee
        text-indent: .2rem
    .listItem
        overflow: hidden
        display: flex
        height: 1.9rem
        border-bottom 1px solid #999
        .item-img
            width: 1.5rem
            height: 1.5rem
            padding: .2rem
        .item-info
            flex: 1
            padding: .1rem
            min-width: 0
            .itemTitle
                line-height: .54rem
                font-size: .32rem
                ellipsis()
            .itemDesc
                line-height: .4rem
                color: #666
                ellipsis()
            .item-btn
                margin-top: .2rem
                background: blue
                padding: 0 .1rem
                border-radius: .06rem
                color: #fff
</style>
